@extends('common.base-master')

@section('html-head')
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
@endsection

@section('html-body')
    <div class="submit-order-page">
        <div class="detail-header">
            我的波罗币：@if($userinfo){{$userinfo->coin}}@endif
        </div>
        <div class="product-count">
            <div class="product-count-box">
                <div class="product-img">
                    <img  src="{{route('Api.Image.ShowPX',['id'=>$good->thumb_id,'px'=>'300px'])}}" alt="">
                </div>
                <div class="product-name">@if($good){{$good->name}}@endif</div>
                <div class="product-price">单价：<span>¥ @if($good){{$good->amount}}@endif</span> 元</div>
                <div class="count-num">×1</div>
                <div class="change-count">
                    <span class="change-btn" id="jian">-</span>
                    <span class="change-num">1</span>
                    <span class="change-btn" id="jia">+</span>
                </div>
                <div class="total-price">
                    总价：<span id="all_price">¥ @if($good){{$good->amount}}@endif</span> 元
                </div>
            </div>
        </div>
        @if($good && count($good->attrs) > 0)
        <div class="detail-header">
            商品属性
        </div>
        <div class="phone-box">
                @foreach($good->attrs as $attr)
                    <div class="phone-tw">
                        <div class="phone-item" data-id="{{$attr[0]['id']}}" id="suxin_{{$attr[0]['id']}}">
                            <span class="logo bg-iphone_logo"></span>
                            <div class="phone-type">{{$attr[0]['name']}}</div>
                            {{--<div class="phone-type">Iphone 6/6s</div>--}}
                        </div>
                        <div class="phone-item fr" data-id="{{$attr[1]['id']}}" id="suxin_{{$attr[1]['id']}}">
                            <span class="logo bg-iphone_logo "></span>
                            <div class="phone-type">{{$attr[1]['name']}}</div>
                        </div>
                    </div>
                @endforeach
        </div>
        @endif
        <div class="detail-header">
            联系方式
            <div class="bg-contact_icon"></div>
            <div class="import-from-info hidden">从账号资料导入</div>
        </div>
        <div class="contact-info">
            <div class="contact-tw">
                <div class="input-con">
                    <input class="contact-name" type="text" name="name" id="realname" placeholder="姓名" value="@if(!is_null($thatAddress)){{$thatAddress->realname}}@endif">
                    <span class="requre-icon">*</span>
                </div>
                <div class="input-con fr">
                    <input class="contact-phone" type="text" name="phone" id="phone" placeholder="手机" value="@if(!is_null($thatAddress)){{$thatAddress->phone}}@endif">
                    <span class="requre-icon">*</span>
                </div>
            </div>
            <div class="contact-tw">
                <div class="input-con">
                    <input class="contact-qq" type="text" name="qq" placeholder="QQ" id="qq" value="@if($userinfo){{$userinfo->qq}}@endif">
                    <span class="requre-icon hidden">*</span>
                </div>
                <div class="input-con fr">
                    <input class="contact-weixin" type="text" name="weixin" placeholder="微信" id="wechat" value="@if($userinfo){{$userinfo->wechat}}@endif">
                    <span class="requre-icon hidden">*</span>
                </div>
            </div>
            <div class="add-box">
                <textarea name="address" rows="3" cols="20" placeholder="地址" id="address">@if(!is_null($thatAddress)){{$thatAddress->province}}{{$thatAddress->city}}{{$thatAddress->area}}{{$thatAddress->info}}@endif</textarea>
                <span class="requre-icon">*</span>
                <span class="tips">请认真填写联系方式，以方便我们联系您，确认效果图</span>
            </div>
        </div>
        <div class="submit-btn">提交订单</div>
    </div>
    <script>
        $(document).ready(function () {
            var count  = 1;
            var amount = '{{$good->amount}}';
            var select = 0;
            var gid = "{{$good->id}}";

            loading();
            function loading() {
//                count  = $.cookie('count');
//                select = $.cookie('select');
                if($.cookie('count') != null){
                    count  = $.cookie('count');
                    $('.change-num').html(count);
                    $('.count-num').html('×'+count);
                    $('#all_price').html(parseInt(amount) * count);
                }

                if($.cookie('select') != null && $.cookie('select') != 0){
                    select = $.cookie('select');
                    $('#suxin_'+ select).addClass('active');
                }
            }

            $('.phone-item').click(function () {
                var id = $(this).data('id');
                if(select == 0){
                    $(this).addClass('active');
                    select = id;
                }else if(select == id){
                    $(this).removeClass('active');
                    select = 0;
                }else {
                    $('#suxin_'+ select).removeClass('active');
                    $(this).addClass('active');
                    select = id;
                }
                $.cookie('select', select);
            });

            $('#jia').click(function () {
                count++;
                $('.change-num').html(count);
                $('.count-num').html('×'+count);
                $('#all_price').html(parseInt(amount) * count);
                $.cookie('count', count);
            });

            $('#jian').click(function () {
                if(count > 1){
                    count--;
                    $('.change-num').html(count);
                    $('.count-num').html('×'+count);
                    $('#all_price').html(parseInt(amount) * count);
                    $.cookie('count', count);
                }
            });

            var selectBtnShow = false;
            $('.bg-contact_icon').click(function () {
                if(!selectBtnShow){
                    $('.import-from-info').removeClass('hidden');
                    selectBtnShow = true;
                } else {
                    $('.import-from-info').addClass('hidden');
                    selectBtnShow = false;
                }

                console.log($.cookie('count'));
            });

            $('.import-from-info').click(function () {
                window.location.href="{{route('Home.User.myNewAddress')}}?type=select&gid="+gid;
            });

            var url=location.href;
            $.ajax({
                type : "post",
                url : "{{route('Api.Wechat.getJsApiPacket')}}",//替换网址，xxx根据自己jssdk文件位置修改
                dataType : "json",
                data:{url:url},
                success : function(obj){
                    if(obj.level == 'success'){
                        var data = obj.data;
                        wx.config({
                            appId: data.appId,
                            timestamp: data.timestamp,
                            nonceStr: data.nonceStr,
                            signature: data.signature,
                            jsApiList: [
                                "onMenuShareTimeline", //分享给好友
                                "onMenuShareAppMessage", //分享到朋友圈
                                "onMenuShareQQ", //分享到QQ
                                "onMenuShareWeibo", //分享到微博
                                'chooseImage', 'previewImage', 'uploadImage', 'downloadImage'
                            ]
                        });
                    }
                },
                error:function(data){
                    console.log("连接失败！");
                }
            });

            $('.chooseimg-btn').click(function () {
                wx.chooseImage({
                    count: 1,
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success: function(res) {
                        var localIds = res.localIds;
                        $('#show-photo').removeClass('hidden');
                        $('#photoShow').attr('src',localIds[0]);
                        uploadImg(localIds[0]);
                    }
                });
            });

            var imgServerId = '';
            function uploadImg(localId) {
                wx.uploadImage({
                    localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function(res) {
                        imgServerId = res.serverId; // 返回图片的服务器端ID
                    }
                });
            }

            $('.submit-btn').click(function () {
                var realname = $('#realname').val();
                var phone    = $('#phone').val();
                var qq       = $('#qq').val();
                var wechat   = $('#wechat').val();
                var address  = $('#address').val();
                console.log(count);
                $.ajax({
                    type : "post",
                    url : "{{route('Api.Good.buildOrder')}}",
                    dataType : "json",
                    data:{
                        gid:gid,
                        attr_id:select,
                        num:count,
                        picture_id:imgServerId,
                        realname:realname,
                        phone:phone,
                        qq:qq,
                        wechat:wechat,
                        address:address

                    },
                    success : function(obj){
                        if(obj.level == 'success'){
                            window.location.href="{{route('Home.Goods.confirmOrderCash')}}?order_id="+obj.data.id;
                        }else {
                            $.toast(obj.message,"forbidden");
                        }
                    },
                    error:function(obj){
                        console.log(obj);
                    }
                });
            });
        })
    </script>
@endsection